<template>
    <div class="day-event" :style="getEventBackgroundColor">
        <div>
            <span class="has-text-centered details">{{event.details}}</span>
            <div class="has-text-centered icons">
                <i class="fa fa-pencil-square edit-icon"
                    @click="editEvent(day.id,event.details)"></i>
                <i class="fa fa-trash-o fa-remove"
                    @click="removeEvent(day.id,event.details)"></i>
            </div>
        </div>
        <div v-if="event.edit">
            <input type="text" :placeholder="event.details" v-model="newEventDetails"/>
            <div class="has-text-centered icons">
                <i class="fa fa-check" @click="updateEvent(day.id,event.details,newEventDetails)"></i>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Event, CalendarDetail } from '@/components/calendarDetail'

@Component({})
export default class CalendarEvent extends Vue {
    name = 'CalendarEvent'
    @Prop()
    event!: Event
    @Prop()
    day!: CalendarDetail

    newEventDetails = "";

    private get getEventBackgroundColor():string{
        const colors = ["#FF9999","#85D6FF","#99FF99","#0000CD","#6495ED","#20B2AA"];
        let randomColor = colors[Math.floor(Math.random() * colors.length)];
        return `background-color:${randomColor}`;
    }
    private editEvent(dayId:number,eventDetails:string):void{
        let obj = {
            dayId:dayId,
            eventDetails:eventDetails
        };
        this.$store.commit("resetEditOfAllEvents");
        this.$store.commit("editEvent",obj);
    }
    private updateEvent(dayId:number,originalEventDetails:string,newEventDetails:string):void{
        let obj = {
            dayId:dayId,
            originalEventDetails:originalEventDetails,
            newEventDetails:newEventDetails
        };
        this.$store.commit("updateEvents",obj);
    }
    private removeEvent(dayId:number,eventDetails:string){
        this.$store.commit("removeEvent",{dayId,eventDetails});
    }
}
</script>

<style lang="scss" scoped>
.day-event {
    margin-top: 6px;
    margin-bottom: 6px;
    display: block;
    color: #4C4C4C;
    padding: 5px;

    .details {
        display: block;
    }

    .icons .fa {
        padding: 0 2px;
    }

    input {
        background: none;
        border: 0;
        border-bottom: 1px solid #FFF;
        width: 100%;

        &
        :focus {
            outline: none;
        }

    }
}
</style>
